<template>
	<view class="">
		<view class="selbox" v-if="isuser_type">
			<view class="sellefttitle" >
				参赛类别：
			</view>
			<view class="selchoosebox">
				<picker @change="user_typechange" :value="user_type" range-key="lebal" :range="user_typearray">
					<view class="selactive">{{user_typearray[user_type].lebal}}</view>
				</picker>
			</view>
		</view>
		<view class="chebox" v-if="israck_track">
			<view class="sellefttitle">
				选择赛道：
			</view>
			<view class="cheboxcon">
				<checkbox-group  class="chegroup" @change="rack_trackchange">
					<label class="chegroupitem" v-for="(item,index) of rack_track" :key="index">
						<checkbox class="a" :data-index="index" :value="item.value" :checked="item.checked"  />
						<text>{{item.name}}</text>
					</label>
				</checkbox-group>
			</view>
		</view>
		<view class="selbox">
			<view class="sellefttitle">
				选手类别：
			</view>
			<view class="selchoosebox">
				<picker @change="contest_typechange" :value="contest_type" range-key="lebal" :range="contest_typearray">
					<view class="selactive">{{contest_typearray[contest_type].lebal}}</view>
				</picker>
			</view>
		</view>
		<view class="matchplayer" v-for="item,index of user_info" :key="index">
			<view  class="sellefttitle">
				<text>{{index==0?'选手基本信息':"团队成员"+index+"信息"}}</text>
				<view v-if="index!=0" class="del" @click="deluserlist" :data-index="index">
					<image src="../static/images/del.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="baseplayerinfo" >
				<view class="playerinfoitem" v-for="its,ids of item" :key="ids">
					<view class="baseinfolefttitle">
						{{its.name}}:
					</view>
					<input class="baseinfoleftipt" type="text" v-model="its.value" :placeholder="'请输入'+its.name+(its.request?'':'(选填)')" />
				</view>
				<!-- <view class="playerinfoitem">
					<view class="baseinfolefttitle">
						手机号:
					</view>
					<input class="baseinfoleftipt" type="text" v-model="item.user_phone" placeholder="请输入手机号" />
				</view>
				<view class="playerinfoitem">
					<view class="baseinfolefttitle">
						微信号:
					</view>
					<input class="baseinfoleftipt" type="text" v-model="item.user_weixin" placeholder="请输入微信号" />
				</view>
				<view class="playerinfoitem">
					<view class="baseinfolefttitle">
						身份证:
					</view>
					<input class="baseinfoleftipt" type="text" v-model="item.user_card" placeholder="请输入身份证" />
				</view>
				<view v-if="user_type==0" class="playerinfoitem">
					<view class="baseinfolefttitle">
						所在院校:
					</view>
					<input class="baseinfoleftipt" type="text" v-model="item.user_school" placeholder="请输入所在院校" />
				</view>
				<view v-if="user_type==1" class="playerinfoitem">
					<view class="baseinfolefttitle">
						单位:
					</view>
					<input class="baseinfoleftipt" type="text" v-model="item.user_unit" placeholder="请输入单位" />
				</view>
				<view v-if="user_type==1" class="playerinfoitem">
					<view class="baseinfolefttitle">
						用户职位:
					</view>
					<input class="baseinfoleftipt" type="text" v-model="item.user_post" placeholder="请输入用户职位" />
				</view> -->
			</view>
		</view>
		<view v-if="contest_type==1" class="addbtn" @click="adduserlist">
			<image class="iconadd" src="../static/images/add.png" mode=""></image>
			<text class="addtext">团队成员信息</text>
		</view>
		<view style="height:120rpx;" class="">
			
		</view>
		<view class="confirebtn" @click="submitt">
			提交报名
		</view>
		<!-- 成为分销员 -->
		<view v-if="isbecomedis" class="becomeDistributor">
			<view class="distributorbox">
				<view class="distitle">
					<view class="">
						现在您还不是平台的分销推广员哟~
		
					</view>
					<view class="">
						您是否愿意成为平台的分销推广员？
					</view>
				</view>
				<view class="disdesc">
					<view class="">
						分销推广员可以享受到推广返佣
					</view>
					<view class="">
						同时佣金还能提现！
					</view>
				</view>
				<view class="distribtn">
					<view class="surebtn" @click="becomefxy">
						我同意
					</view>
					<view class="backbtn" @click="noisbecomedis">
						返回
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		matchadduser,
		getContestInfo,
		getUserType,
		userregisterfxy,
		getreport,
		rptform
	} from '../../../api/match.js';
	const phonereg = /^1[0-9]{10}$/
	const sfidreg  = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
	export default {
		data() {
			return {
				contestId: null, // 赛事id
				isuser_type:false,
				user_type: 0,
				user_typearray: [
					// {
					// 	value:0,
					// 	lebal: "大学生组"
					// },
					// {
					// 	value:1,
					// 	lebal: "社会组"
					// }
				],
				israck_track:false, // 是否显示选择赛道
				rack_track:[
				],
				rack_track_origin: [
				        { value: "1", name: "微信分销", checked: false },
				        { value: "2", name: "种草分销", checked: false },
				        { value: "3", name: "直播带货", checked: false }
				      ],
				contest_type:0,
				contest_typearray: [{
						value:0,
						lebal: "个人参赛"
					},
					{
						value:0,
						lebal: "团队参赛"
					}
				],
				isbecomedis:false  ,// 成为分销员弹窗
				userType: 0,// 用户类型 1：商家；2：分销员; 3:主播
				user_info:[
					// {
					// 	user_name:'',
					// 	user_phone:'',
					// 	user_weixin:'',
					// 	user_card:'', //身份证号
					// 	user_school:'', // 学校 所在院校
					// 	user_unit:'', // 单位
					// 	user_post:'',// 用户职位
					// }
				],
				xuexiao:[],
				shehui:[],
				reportinfo:[],
			}
		},
		 onLoad(options){
			this.contestId = options.contestId
				this.getrptinfo(options.contestId)
			 this.settrack_arr(options.track_arr)
		},
		onShow() {
			this.init()
			
		},
		methods: {
			settrack_arr(track_arr){
			  if(track_arr){
				var track_arrindex =track_arr.split(',')
				var newrack_track = []
				for(var key of track_arrindex){
				  newrack_track.push(this.rack_track_origin[key-1])
				}
				this.rack_track = newrack_track
				this.israck_track = true
			  }else{
				this.israck_track = false
			  }
			  
			},
			async getrptinfo(contestId){
				var data = {
					contest_id:contestId
				}
				var resinfo = await getreport(data)
				this.isuser_type = resinfo.data[0].name =='不区分类型'?false:true
				  var user_typearray = []
				  for(var i=0;i<resinfo.data.length;i++){
					var usertypeobj ={}
					usertypeobj.value = i
					usertypeobj.lebal = resinfo.data[i].name
					user_typearray.push(usertypeobj)
					for(var key of resinfo.data[i].info){
					  key.value = ""
					}
				  }
				  var user_info = JSON.parse(JSON.stringify(resinfo.data[0].info))
				   user_info.forEach(element => {
					  element.request = true
					});
				  this.user_info  = [user_info] 
				  this.user_typearray = user_typearray
				  this.reportinfo = resinfo.data
				// var shehui = await getshehuiinfo()
				//   for (var key of shehui.data) {
				// 	key.value = "";
				// 	key.rule=undefined
				//   }
				//   for (var key of xuexiao.data) {
				// 	key.value = "";
				// 	key.rule=undefined
				//   }
				//   this.xuexiao =JSON.parse(JSON.stringify(xuexiao.data));
				//   this.shehui = JSON.parse(JSON.stringify(shehui.data));
				//   var rlist = JSON.parse(JSON.stringify(xuexiao.data));
				//   this.user_info = [rlist];
			},
			
			// 提交报名
			async submitt(){
				// 删除数组中第二个
				// this.user_info.splice(2,1)
				// return false
				var {contestId,userType,user_type,user_typearray,rack_track:rack_trackarray,contest_type,contest_typearray,user_info} = this
				var rack_track = []
				for(var key of rack_trackarray){
					if(key.checked){
						rack_track.push(key.value)
					}
				}
				if(this.rack_track.length>0){
					if(rack_track.length===0){
						return uni.showToast({
							
							title:"请选择赛道",
							icon:"none"
						})
					}
				}
				
				// 判断基本信息是否填写完整
				// 判断用户是什么  大学生 社会 user_type 0  1
				// user_info
				// var infoarr = []
				// for(var i=0;i<user_info.length;i++){
				// 	var {user_name,user_phone,user_weixin,user_unit,user_school,user_post,user_card} = user_info[i]
				// 	console.log(user_name,user_phone,user_weixin,user_card,user_unit,user_school,user_post,)
				// 	if(user_name.trim()==''){
				// 		return uni.showToast({
				// 			title:"名称不能为空",
				// 			icon:"none"
				// 		})
				// 	}
				// 	if(user_phone.trim()==''){
				// 		return uni.showToast({
				// 			title:"手机号不能为空",
				// 			icon:"none"
				// 		})
				// 	}
				// 	// phonereg
				// 	if(!phonereg.test(user_phone)){
				// 		return uni.showToast({
				// 			title:"手机号不正确",
				// 			icon:"none"
				// 		})
				// 	}
				
				// 	// sfidreg
				// 	if(!sfidreg.test(user_card)){
				// 		return uni.showToast({
				// 			title:"身份证号码不正确",
				// 			icon:"none"
				// 		})
				// 	}
				// 	if(user_type==0){
				// 		if(user_school.trim()==''){
				// 			return uni.showToast({
				// 				title:"所在院校不能为空",
				// 				icon:"none"
				// 			})
				// 		}
						
				// 	}else if(user_type==1){
				// 		if(user_unit.trim()==''){
				// 			return uni.showToast({
				// 				title:"单位不能为空",
				// 				icon:"none"
				// 			})
				// 		}
						
				// 		if(user_post.trim()==''){
				// 			return uni.showToast({
				// 				title:"用户职位不能为空",
				// 				icon:"none"
				// 			})
				// 		}
				// 	}
				// 	var newobj =user_type==0?{user_name,user_phone,user_weixin,user_card,user_school}:{user_name,user_phone,user_weixin,user_card,user_unit,user_post}
				// 	infoarr.push(newobj)
				// }
				// console.log(infoarr,99)
				for(var i=0;i<this.user_info.length;i++){
					for(var j=0;j<this.user_info[i].length;j++){
						if(this.user_info[i][j].request){
							if(this.user_info[i][j].value.trim()==''){
								return uni.showToast({
									title:this.user_info[i][j].name +'不能为空',
									icon:"none",
									mask:false,
								})
							}
						}
					  
					}
				  }
				var data = {
					contestId,
					// type:是否店家参赛（1非店家，2店家）
					// userType == 3?'2':userType == 2?'0':userType == 1?'1': '1' ,
					type:1 ,
					user_type:user_typearray[user_type].lebal,
					rack_track,
					contest_type:contest_typearray[contest_type].lebal,
					user_info:this.user_info
				}
				uni.showLoading({
					title:"报名中...",
					mask:true
				})
				// var res = await matchadduser(data)
				var res = await rptform(data)
				if(res.status==400){
					uni.showToast({
						title:res.message,
						icon:"none",
						mask:false,
					})
				}else if(res.status==200){
					uni.showToast({
						title:"报名已提交",
						icon:"none",
						mask:true,
						success:()=>{
							setTimeout(()=>{
								uni.navigateBack({
									delta:1
								})
							},1000)
						}
					})
				}
			},
			async init(){
				var res = await getUserType()
				// 判断是有有1  商家
				var boo3 = res.data.some(r=> r==1)
				var boo2 = res.data.some(r=> r==2)
				// this.userType = 1
				if(boo3){
					this.userType = 3
				}else if(boo2){
					this.userType = 2
				}else{
					this.userType = 1
				}
			},
			user_typechange(e) {
				this.user_type = e.detail.value
				var user_info = JSON.parse(JSON.stringify(this.reportinfo[e.detail.value].info))
				user_info.forEach(element => {
				  element.request = true
				});
				 this.user_info=[user_info]
				// if(this.user_type==0){
				// 	this.user_info=[JSON.parse(JSON.stringify(this.xuexiao))]
				//   }else{
				// 	this.user_info=[JSON.parse(JSON.stringify(this.shehui))]
				//   }
				  
			},
			contest_typechange(e){
				this.contest_type = e.detail.value
				if( e.detail.value==0){
					this.user_info.splice(1)
				}
			},
			// 复选框 分销赛道
			rack_trackchange(e){
				// 判断当前点击 
				// 判断当前是否是分销
				const rack_track = this.rack_track
				const {userType} = this
				var vararr = e.detail.value
				for(var i=0;i<rack_track.length;i++){
					const item = rack_track[i]
					if(vararr.includes(item.value)){
						this.$set(item,'checked',true)
					}else{
						this.$set(item,'checked',false)
					}
				}
				// 判断是否需要分销
				var fenxboolean = vararr.some(r=>{
					return r ==1 || r == 2
				})
				// 如果需要 userType 说明不符合分销的条件
				if(fenxboolean && userType ==1){
					this.isbecomedis = true
				}
			},
			// 成为分销员
			async becomefxy() {
				uni.showLoading({
					title:"加载中...",
					mask:true
				})
				var res = await userregisterfxy()
				uni.hideLoading()
				this.userType = 2
				this.isbecomedis = false
				this.isshowsing = true
			},
			// 不成为分销员
			noisbecomedis(){
				this.isbecomedis = false
				this.$set(this.rack_track[0],"checked",false)
				this.$set(this.rack_track[1],"checked",false) 
			},
			// 添加团队成员
			adduserlist(){
				this.user_info.push(JSON.parse(JSON.stringify(this.reportinfo[this.user_type].info)));
				// if(this.user_type==0){
				//         this.user_info.push(JSON.parse(JSON.stringify(this.xuexiao)));
				//       }else{
				//         this.user_info.push(JSON.parse(JSON.stringify(this.shehui)));
				//       }
			},
			// 删除对应多余的空表
			deluserlist(e){
				const {index} = e.currentTarget.dataset
				this.user_info.splice(index,1)
			},
		}
	}
</script>
<style>
	
	page {
		background-color: #fff;
	}
	
</style>
<style lang="scss" scoped>
	.cheboxcon{
		checkbox .wx-checkbox-input {
		  border-radius: 50% !important;
		  color: #ffffff !important;
		}
		
		checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		  color: #fff;
		  background: #3d7eff;
		}
		
		.wx-checkbox-input.wx-checkbox-input-checked {
		  border: none !important;
		}
	}
	.selbox {
		display: flex;
		align-items: center;
		padding:30rpx 20rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #B5B5B5;
		width: 700rpx;
		margin: auto;
		.sellefttitle {
			font-size: 30rpx;
			font-weight: 600;
			color:#000;
			width: 200rpx;
		}

		.selchoosebox {
			flex: 1;
			position: relative;
			.selactive {
				font-size: 30rpx;
				font-weight: 400;
				color: #6D6666;
				background-image: url(../static/images/bottom_arrow.png);
				background-size: contain;
				background-repeat: no-repeat;
				background-position: 80% 50%;
			}
		}
	}

	.chebox {
		padding: 30rpx 20rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #B5B5B5;
		width: 700rpx;
		margin: auto;

		.sellefttitle {
			font-size: 30rpx;
			font-weight: 600;
			color: #000;
			// border: 1px solid red;
			width: 200rpx;
		}

		.cheboxcon {
			.chegroup{
				// border:1px solid red;
				margin-top:20rpx;
				display:flex;
				align-items: center;
				// justify-content: space-around;
				.chegroupitem{
					margin-right:50rpx; 
					display:flex;
					align-items: center;
					justify-content: center;
					font-size:30rpx;
					
				}
			}
			
		}
	}
	.matchplayer{
		box-sizing: border-box;
		width: 700rpx;
		margin: auto;
		.sellefttitle {
			font-size: 30rpx;
			font-weight: 600;
			padding: 30rpx 20rpx;
			padding-bottom:0;
			box-sizing: border-box;
			display:flex;
			align-items: center;
			justify-content: space-between;
			.del{
				width:60rpx;
				height:60rpx;
				// border:1px solid red;
				display:flex;
				align-items: center;
				justify-content: center;
				image{
					width:40rpx;
				}
			}
			
		}
		.baseplayerinfo{
			margin-bottom:30rpx;
			.playerinfoitem{
				display:flex;
				align-items: center;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				border-bottom: 1px solid #B5B5B5;
				.baseinfolefttitle{
					font-size: 30rpx;
					font-weight: 600;
					color: #000;
					width:200rpx;
					box-sizing: border-box;
				}
				.baseinfoleftipt{
					flex:1;
					font-size: 30rpx;
					font-weight: 400;
					color: #6D6666;
				}
				
			}
		}
	}
	
	.addbtn{
		display:flex;
		border: 1px solid #B5B5B5;
		justify-content: center;
		align-items: center;
		width:300rpx;
		height:60rpx;
		margin:auto;
		border-radius:10rpx;
		margin-top:50rpx;
		.iconadd{
			width:40rpx;
			height:40rpx;
		}
		.addtext{
			font-size:30rpx;
			margin-left:20rpx;
		}
	}
	.confirebtn{
		width:100%;
		height:100rpx;
		text-align:center;
		line-height:100rpx;
		color:#fff;
		background-color:#F5222D;
		position:fixed;
		bottom:0;
		left:0;
		z-index:999;
	}
	.becomeDistributor {
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .5);
		z-index: 9;
		display: flex;
		align-items: center;
		justify-content: center;
	
		.distributorbox {
			background-color: #fff;
			width: 615rpx;
			height: 381rpx;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
	
			.distitle {
				view {
					font-size: 25rpx;
					font-family: SourceHanSansCN;
					font-weight: bold;
					color: #DA1616;
					text-align: center;
					line-height: 40rpx;
				}
			}
	
			.disdesc {
				margin-top: 33rpx;
	
				view {
					font-size: 24rpx;
					font-family: SourceHanSansCN;
					font-weight: 400;
					color: #727070;
					text-align: center;
					line-height: 40rpx;
				}
			}
	
			.distribtn {
				display: flex;
				justify-content: space-between;
				margin-top: 38rpx;
	
				.surebtn {
					width: 213rpx;
					height: 64rpx;
					line-height: 64rpx;
					text-align: center;
					background: #DA1616;
					border-radius: 14rpx;
					font-size: 25rpx;
					font-family: SourceHanSansCN;
					font-weight: 400;
					color: #FFFFFF;
	
	
				}
	
				.backbtn {
					width: 213rpx;
					height: 64rpx;
					line-height: 64rpx;
					text-align: center;
					background: #FFFFFF;
					border: 1px solid #B5B5B5;
					border-radius: 14rpx;
					font-size: 25rpx;
					font-family: SourceHanSansCN;
					font-weight: 400;
					color: #333333;
					margin-left: 20rpx;
				}
			}
		}
	
	}
</style>
